<xsl:template match="/">
<head>
   <META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Maandrapport <xsl:value-of select='./@periode' /> </title>
   <style>
table{border-collapse:collapse;}

h3 {text-align:left;
	font-family: Verdana,Arial, Helvetica;
   	font-size: 16px;
	font-weight: bold;
	left:0px;
	display:block}

td{text-align: center;
	font-family: Verdana,Arial, Helvetica;
  font-size: 12px;
	font-weight: normal;
	left:0px;}

th{text-align: left;
	font-family: Verdana,Arial, Helvetica;
  font-size: 12px;
	font-weight: normal;
	margin-left: 3px;
	left:0px;
	padding: 2px}

.titel{text-align:center;
	font-family: Verdana,Arial, Helvetica;
  font-size: 12px;
	font-weight:normal;
	margin-top: 30px;
	border: solid 1px;
	padding: 5px;
	background-color: #DDDDDD}

#gemiddelde{
	background-color: #DDDDDD}

#totaal{
	background-color: #CCCCFF}

.tot{border: solid 1px;}
</style>
<script>
function openCommentaar(){
  var comment=document.getElementById("commentaar");
  if(comment.style.display=='none'){
    comment.style.display='block';
  }
  else{
    comment.style.display='none';
  }
}  
</script>
</head>

<body>
<xsl:apply-templates select='//leerling' />
<div>
<table id="overzicht" border="1" cellspacing="0" rules="cols">
<xsl:apply-templates select='//vakken' />
<xsl:apply-templates select='//totaal' />
</table>
</div>
<button onClick="openCommentaar()">Commentaar</button>
<div id="commentaar" style="display:none;">
<table border="1" cellspacing="0"> 
  <tr class="gemiddelde"><th colspan="2" class="titel"> Commentaar voor de klasleraar</th></tr>
  <xsl:for-each select='//commentaar/*'>
    <xsl:call-template name="commentaar" />
  </xsl:for-each>
</table>  
</div>
</body>
</xsl:template>

<xsl:template match="leerling">
<h3>
Maandrapport&#160;<xsl:value-of select='../@jaar' /> - <xsl:value-of select='//rapport/@jaar + 1' />:
<xsl:value-of select='voornaam' />&#160;<xsl:value-of select="achternaam" /> </h3>
</xsl:template>

<xsl:template match="vakken" >
<TR><TD></TD>
<TD class="titel">Maandrapport 1</TD>
<TD class="titel">Maandrapport 2</TD>
<TD class="titel">Maandrapport 3</TD>
</TR>
<xsl:for-each select="./*">
  <xsl:call-template name="doevak" />
</xsl:for-each>
</xsl:template>


<xsl:template name="doevak">
<tr><th><xsl:value-of select="./naam" /></th>
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./c1" />
	    </xsl:call-template></td>
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./c2" />
	    </xsl:call-template></td>
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./c5" />
	    </xsl:call-template></td>	    	    	    
</tr>
</xsl:template>


<xsl:template match="totaal">
<tr id="totaal"><th>Totaal</th>
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./tot1" />
	    </xsl:call-template></td>	
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./tot2" />
	    </xsl:call-template></td>	
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./tot5" />
	    </xsl:call-template></td>
</tr>
<tr id="gemiddelde"><th>Klasgemiddelde</th>
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./tot1gem" />
	    </xsl:call-template></td>	
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./tot2gem" />
	    </xsl:call-template></td>	
	<td><xsl:call-template name="kleur">
	        <xsl:with-param name="cijfer" select="./tot5gem" />
	    </xsl:call-template></td>
</tr>
</xsl:template>

<xsl:template name="kleur">
  <xsl:param name="cijfer" />
  <font>
		<xsl:attribute name="color">
		<xsl:choose>
	  	<xsl:when test="$cijfer &lt; 50">#ff0000</xsl:when>
			<xsl:otherwise>black</xsl:otherwise>
		</xsl:choose>
 		</xsl:attribute>	
    <xsl:value-of select="$cijfer" />
  </font>
</xsl:template>


<xsl:template name="commentaar">
<xsl:if test="klasleraar"> 
<tr>
  <th width="5mm" class="titel"><xsl:value-of select="name()" /></th>
  <th> 
    <xsl:apply-templates select="klasleraar" />
  </th>
</tr>
</xsl:if>
</xsl:template>

<xsl:template match="klasleraar">
  <xsl:if test="./@periode='m1'">
    1: <xsl:value-of select="." /><br />
  </xsl:if>
  <xsl:if test="./@periode='m2'">
    2: <xsl:value-of select="." /><br />
  </xsl:if>
  <xsl:if test="./@periode='m3'">
    3: <xsl:value-of select="." /><br />
  </xsl:if>
  <xsl:if test="./@periode='m4'">
    4: <xsl:value-of select="." /><br />
  </xsl:if>
  <xsl:if test="./@periode='m5'">
    5: <xsl:value-of select="." /><br />
  </xsl:if>          
</xsl:template>